<html>
	<head>
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>Add a patient</title>
		<style type="text/css">
			h3 {color:#fff;font-weight:bold;}
			input { height: 40px; width:90%; margin: 15px;}
			input[type=submit] {width: 45%;}
			textarea { margin-bottom: 5px; }
			.error { color:red; font-weight:bold; }
		</style>
		<script type="text/javascript">
		function send() {
			if (validate()) {
				// add the necessary code to forward the data to the native Ti wrapper
				Ti.App.fireEvent('patientSaved',{
					first_name:document.getElementById('firstName').value,
					last_name:document.getElementById('lastName').value,
					id:document.getElementById('patientId').value,
					e_mail:document.getElementById('eMail').value,
					birth_date:document.getElementById('birthDate').value
				});
			}
			else
				return false;
		};
		
		function validate() {
			var valid = true;
			var first = document.getElementById('firstName').value;
			var	last = document.getElementById('lastName').value;
			var	e_mail = document.getElementById('eMail').value;
			var	birth_date = document.getElementById('birthDate').value;
			
			if (!first || first ==='') {
				document.getElementById('firstNameError').innerHTML = 'First Name is required';
				valid = false;
			}
			else {
				document.getElementById('firstNameError').innerHTML = '';
			}
			if (!last || last ==='') {
				document.getElementById('lastNameError').innerHTML = 'Last Name is required';
				valid = false;
			}
			else {
				document.getElementById('lastNameError').innerHTML = '';
			}
			if (!e_mail || e_mail ==='') {
				document.getElementById('eMailError').innerHTML = 'E-Mail address is required';
				valid = false;
			}
			else {
				var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
   				if (!emailPattern.test(e_mail)) {
					document.getElementById('eMailError').innerHTML = 'E-Mail address is invalid';
					valid = false;
				}
				else {
					document.getElementById('eMailError').innerHTML = '';
				}
			}
			if (birth_date && birth_date !=='') {
				var datePattern = /^[12][90][0-9][0-9]-[01]?[0-9]-[0-3]?[0-9]$/;
				if (!datePattern.test(birth_date)) {
					document.getElementById('birthDateError').innerHTML = 'Birth Date must be YYYY-MM-DD';
					valid = false;
				}
			}

			return valid;
		}
		
		function cancel() {
			// add the necessary code to forward the data to the native Ti wrapper
			// it should pass variables: name, heightFeet, heightInches, and description as an object
			Ti.App.fireEvent('patientSaveCancelled');
		};
		</script>
	</head>
	<body style="background:url(../images/grain.png);height:100%;width:100%;">
		<div id="firstNameError" class="error"></div>
		<div>
			<input type="text" placeholder="First name" id="firstName"/>
		</div>
		<div id="lastNameError" class="error"></div>
		<div>
			<input type="text" placeholder="Last name" id="lastName"/>
		</div>
		<div>
			<!-- alter to display the numeric keyboard on focus -->
			<input type="number" placeholder="Patient ID" id="patientId"/>
		</div>
		<div id="eMailError" class="error"></div>
		<div>
			<input type="text" placeholder="E-Mail Address" id="eMail"/>
		</div>
		<div id="birthDateError" class="error"></div>
		<div>
			<input type="number" placeholder="Birth Date (YYYY-MM-DD)" id="birthDate"/>
		</div>
		<div>
			<input type="submit" value="Save" onclick="send();"/>
			<input type="submit" value="Cancel" onclick="cancel();"/>
		</div>
	</body>
</html>
